<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
{#    <link rel="stylesheet" href="./static/plugins/css/bootstrap-3.4.1-dist/css/bootstrap.min.css">#}
<style>
    .account{
        width:600px;
        margin:0 auto;
    }
</style>

</head>
<body>

<div class="account">
    <h1>注册</h1>
<form>
    
  
      {% for field in form %}
          {% if field.name == "code" %}
          <div class="form-group">
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
              <div class="clearfix">
                  <div class="col-md-6" style="padding-left:0">{{ field }}</div>
                  <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码"></div>
              </div>
            </div>
          {% else %}
          <div class="form-group">
          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
          {{ field }}
           </div>
          {% endif %}
  {% endfor %}
<div class="row">
    <div class="col-xs-3">
{#        <button id='btnSubmit' type="submit" class="btn btn-primary">注册</button>#}
{#        想要ajax绑定事件那么type就不能写submit，submit是form事件触发#}
        <button id='btnSubmit' type="button" class="btn btn-primary">注册</button>
    </div>
</div>
</form>
</div>
{% block js %}
    <script>
    //页面框架加载完成后自动执行程序
    $(function(){
        blindClickBtnSms();
        blindClickSubmit();
    })
    /*
    点击提交注册
    */
    function blindClickSubmit(){
        $('#btnSubmit').click(function(){
            //收集表单中的数据（找到每一个字段id）
            //数据ajax发送到后台
        })
        
    }
    /*
    * 点击获取验证码的按钮绑定事件
    * */
    function blindClickBtnSms(){
       pass
    }
    {#倒计时#}
    function sendSmsRemind(){}
    </script>
{% endblock %}
</body>
</html>